<!doctype html>
<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <link href="//fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
  <script src="layervis.js"></script>
  <link href="layervis.css" rel="stylesheet">
</head>
<body>


<div class="layervis">
  <div class="layervis-root framelayout" style="width: 360px; height: 640px; background-color: #e5e5e5">

    <div class="nolayer" style="margin-left: 16px; margin-top: 72px">
      Hi there!
    </div>

    <div class="appbar" style="width: 100%; height: 56px; background-color: #3f51b5; fill: white; color: #fff" data-elevation="4">

      <svg style="position: absolute; height: 24px; top: 16px; left: 16px;" width="24" height="24" viewBox="0 0 24 24">
        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
      </svg>

      <span class="title" style="position: absolute; left: 72px; line-height: 56px; font-size: 20px; font-weight: 500;">Screen Title</span>

    </div>

    <div class="fab" data-elevation="4" style="right: 16px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%; background-color: #ff4081; fill: white;">

      <svg style="position: absolute; width: 24px; height: 24px; left: 50%; top: 50%; margin-left: -12px; margin-top: -12px;" width="24" height="24" viewBox="0 0 24 24">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
      </svg>

    </div>

  </div>
</div>


<style>

.layervis {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

</style>

</body>
</html>
